:host {
  display: block;
}

.accordion {
  --border: 1px solid var(--bl-color-neutral-lighter);
  --default-radius: var(--bl-size-2xs);
  --radius-top-left: var(--bl-accordion-radius-top-left, var(--default-radius));
  --radius-top-right: var(--bl-accordion-radius-top-right, var(--default-radius));
  --radius-bottom-right: var(--bl-accordion-radius-bottom-right, var(--default-radius));
  --radius-bottom-left: var(--bl-accordion-radius-bottom-left, var(--default-radius));

  width: 100%;
}

.summary {
  list-style: none;
  user-select: none;
  cursor: pointer;
  font: var(--bl-font-title-3-medium);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bl-size-2xs);
  padding: var(--bl-size-m);
  background: var(--bl-color-neutral-full);
  color: var(--bl-color-neutral-darker);
  border: var(--border);
  border-bottom: var(--bl-accordion-border-bottom, var(--border));
  border-radius: var(--radius-top-left) var(--radius-top-right) var(--radius-bottom-right)
    var(--radius-bottom-left);
  transition: background-color 200ms, border-bottom 200ms, border-radius 200ms;
}

.summary::-webkit-details-marker {
  display: none;
}

.summary:hover {
  background: var(--bl-color-neutral-lightest);
}

.summary:focus-visible {
  outline: 2px solid var(--bl-color-primary);
  outline-offset: -1px;
}

.indicator {
  transition: transform 200ms;
}

.accordion[open] .indicator {
  transform: rotate(180deg);
}

.accordion[open] .summary {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.caption {
  flex: 1;
}

.accordion-content {
  padding: var(--bl-size-m);
  background: var(--bl-color-neutral-full);
  border: var(--border);
  border-top: 0;
  border-bottom: var(--bl-accordion-border-bottom, var(--border));
  border-bottom-left-radius: var(--radius-bottom-left);
  border-bottom-right-radius: var(--radius-bottom-right);
  font: var(--bl-font-body-text-2-regular);
}

.disabled .summary {
  cursor: not-allowed;
  background: var(--bl-color-neutral-lightest);
  color: var(--bl-color-neutral-light);
}

.accordion:not([open]) .accordion-content {
  display: none;
}
